<template>
	<view class="schedule-container">
		<view class="schedule-header safe-area">
			<view class="header-content">
				<view class="back-icon" @tap="goBack">
					<uni-icons type="left" size="23" color="#333"></uni-icons>
				</view>
				<text class="title">课程安排</text>
			</view>
		</view>

		<view v-if="loading" class="loading">
			<text>加载中...</text>
		</view>

		<view v-else-if="scheduleList.length === 0" class="empty-state">
			<text>暂无课程安排</text>
		</view>

		<view v-else class="schedule-list">
			<view v-for="(item, index) in scheduleList" :key="index" class="schedule-item"
				@tap="previewCourseFile(item.id)">
				<view class="time-section">
					<text class="date">{{ formatDate(item.lessonDate) }}</text>
					<text class="time-span">{{ item.timeSpan }}</text>
				</view>

				<view class="course-section">
					<text class="course-name">{{ item.subject }}</text>
					<view class="location">
						<uni-icons type="location" size="16" color="#666"></uni-icons>
						<text>{{ item.address || '待定' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		apiCourse
	} from "../../api/apis";

	const scheduleList = ref([]);
	const loading = ref(true);
	const goBack = () => {
		uni.navigateBack();
	};
	onMounted(async () => {
		try {
			const studentInfo = uni.getStorageSync('studentInfo');
			if (studentInfo?.projectId) {
				const res = await apiCourse({
					projectId: studentInfo.projectId
				});
				if (res.code === 0 && Array.isArray(res.data)) {
					console.log(res.data)
					scheduleList.value = res.data;
				}
			}
		} catch (error) {
			uni.showToast({
				title: '获取课表失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	});

	const formatDate = (date) => {
		if (!date) return '';
		const d = new Date(date);
		return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
	};
	const previewCourseFile = (courseId) => {
		console.log(courseId)
		uni.navigateTo({
			url: `/pages/schedule/preview/preview?courseId=${courseId}`
		});
	};
</script>


<style lang="scss" scoped>
	page {
		background-color: transparent;
	}

	.schedule-container {
		min-height: 100vh;
		background: rgba(245, 247, 250, 0.98);
		backdrop-filter: blur(10px);
		padding: 0;
		padding-top: var(--status-bar-height, 44px);
	}

	.schedule-header {
		padding: 20rpx 30rpx;

		.header-content {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;

			.back-icon {
				position: absolute;
				left: 0;
				display: flex;
				align-items: center;
				height: 100%;
				padding: 0 20rpx;
			}

			.title {
				flex: 1;
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}

	.loading,
	.empty-state {
		text-align: center;
		padding: 40rpx;
		color: #666;
		font-size: 28rpx;
	}

	.schedule-list {
		padding: 0 30rpx 30rpx;

		.schedule-item {
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			padding: 28rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			display: flex;
			transition: transform 0.2s ease;

			&:active {
				transform: scale(0.99);
			}

			.time-section {
				min-width: 180rpx;
				border-right: 2rpx solid #eee;
				padding-right: 28rpx;
				margin-right: 28rpx;

				.date {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					display: block;
					margin-bottom: 12rpx;
				}

				.time-span {
					font-size: 24rpx;
					color: #666;
					display: block;
					background: #f8f9fa;
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
					text-align: center;
				}
			}

			.course-section {
				flex: 1;

				.course-name {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 16rpx;
					display: block;
					line-height: 1.4;
				}

				.location {
					display: flex;
					align-items: center;
					gap: 8rpx;
					color: #666;
					font-size: 24rpx;
					background: #f8f9fa;
					padding: 8rpx 16rpx;
					border-radius: 8rpx;
					width: fit-content;

					.uni-icons {
						margin-right: 6rpx;
						color: #1890ff;
					}
				}
			}
		}
	}
</style>